<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小A生活说</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入重置样式表 -->
    <!-- <link rel="stylesheet" href="./css.css"> -->
    <!-- 引入css样式表 -->
    <link rel="stylesheet" href="./style.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <!-- 引入封装的ajax函数 -->
    <script src="./ajax.js"></script>
    <!-- 引入js -->
    <script src="./js.js"></script>
    <!-- <script src="./link.js"></script> -->
</head>

<body>
    <div class="wrapper">

        <!-- 登录界面 -->
        <div class="logging ">
            <button class="closebtn1" style="position:fixed;top:0%;right:0%;transform:translate(-50%,50%); background-color: rgb(219, 26, 26);font-size:25px;text-align: center; border-radius: 50%; width: 25px;height: 25px;">×</button>
            <h1 class="ti">欢迎登录</h1>
            <!-- 登录标题 -->
            <!-- <div class="logo">登录</div> -->
            <!-- 用户名框 -->
            <div class="phonenum">
                <div class="user"><i class="fas fa-user-circle"></i></div>
                <input id="username" type="text" placeholder="用户名" autocomplete='on'>
            </div>
            <!-- 密码框 -->
            <div class="phonenum">
                <div class="user"><i class="fas fa-lock"></i></div>
                <input id="password" type="password" placeholder="密码" autocomplete='on'>
            </div>
            <!-- 翻转按钮 -->
            <div class="tran">没有账号，注册</div>
            <!-- 登录按钮 -->
            <div id="submit" class="submit">登录</div>
            <span> <label class="left1">
                <input type="checkbox" id="remember">
                记住密码
            </label>
            <label class="right55">
                <input type="checkbox" id="check1" >
                七天免登录
            </label></span>
        </div>

        <!-- 注册界面 -->
        <div class="logging p hidden" action="">
            <button id="closebtn2" style="position:fixed;top:0%;right:0%;transform:translate(-50%,50%); background-color: rgb(219, 26, 26);font-size:25px;text-align: center; border-radius: 50%; width: 25px;height: 25px;">×</button>
            <!-- 注册标题 -->
            <h1 class="ti1">注册</h1>
            <!-- 用户名框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-user-circle"></i></div>
                <input id="username_1" type="text" placeholder="用户名" autocomplete='off'>
            </div>
            <!-- 密码框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-lock"></i></div>
                <input id="password_1" type="password" placeholder="密码">
            </div>
            <!-- 姓名框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-id-card"></i></div>
                <input id="name_1" type="text" placeholder="姓名" autocomplete='off'>
            </div>
            <!-- 电话号码框 -->
            <div class="phonenum" style="margin: 10px auto;">
                <div class="user"><i class="fas fa-phone"></i></div>
                <input id="phone_1" type="text" placeholder="电话号码" autocomplete='off'>
                <!-- 判断电话号码符不符合格式框 -->
                <p id="info"></p>
            </div>
            <span id="ti2"></span>
            <!-- 翻转按钮 -->
            <div class="tran">已有账号，登录</div>
            <!-- 注册按钮 -->
            <div id="submit_1" class="submit" style="position: relative;top: 5px;bottom:10px;">注册</div>
        </div>
    </div>
    </div>
    <!-- 记住用户名 -->
    <script>
        var username = document.querySelector('#username');
        var password = document.querySelector('#password');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;

        }
        if (localStorage.getItem('password')) {
            password.value = localStorage.getItem('password');
            remember.checked = true;

        }
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value);
                localStorage.setItem('password', password.value);
            } else {
                localStorage.removeItem('username');
                localStorage.removeItem('password');
            }
        })
    </script>
    <header class="header">
        <div class="container clearfix">
            <div class="logo left">
                <h1>
                    <a href="">
                    </a>
                </h1>
            </div>
            <div class="search left">
                <form>
                    <input type="text" class="txt" placeholder="电影、书籍、音乐">
                    <button>
                        <i class="iconfont iconxiazai17"></i>
                    </button>
                </form>
            </div>
            <nav class="menu  ">
                <button class="menu-read" id="submit33"> <span>查看所有动态</span> </button>
                <button class="menu-movie" id="submit88"> <span>搜索动态</span> </button>
                <button class="menu-music" id="page"> <span>个人主页</span> </button>
                <button class="menu-group" id="photo1"> <span>个人相册</span> </button>
            </nav>
        </div>
    </header>
    <div class="bigbox">
        <div class="banner">
            <div class="container1 clearfix">
                <div class="loginarea ">
                    <h1 class="zi4">欢迎注册登录<br>加入我们</h1>
                    <button class="loginbtn">登录以及注册</button>
                    <button class="back3">回到首页</button>
                </div>
                <div class="loginarea2">
                    <h1 class="zi8">修改密码</h1>
                    <input type="text" class="checkpw1" id="op" placeholder="请输入原来的的密码">
                    <div id="ti4"></div>
                    <input type="text" class="checkpw" id="np" placeholder="请输入修改后的密码">
                    <span id="ti3"></span>
                    <button class="postbtn" id="submit8">提交修改</button><br>
                    <button class="back1">返回用户界面</button>
                </div>
                <div class="loginarea1 ">
                    <h1 class="zi8">用户信息</h1>
                    <div class="mes">
                        <h2 style="width: 100%;height: 20px;text-align: center; font-size: 20px; font-weight: 600;">资料栏</h2>
                        <p id="ID" style="width: 100%;height: 20px;text-align: center; font-size: 15px; font-weight: 500;margin-top: 20px;"></p>
                        <p id="Name" style="width: 100%;height: 20px;text-align: center; font-size: 15px; font-weight: 500;margin-top: 20px;margin-bottom: 10px;"></p>
                        <p id="Phone" style="width: 100%;height: 20px;text-align: center; font-size: 15px; font-weight: 500;margin-top: 30px;">手机号码</p>
                    </div>
                    <div id="picbox">
                        <img src="" class="pic1" id="pic1" alt="" style="width: 100%;height: 100%;">

                    </div>
                    <button class="changepw"> 修改密码</button><br>
                    <input type="file" id="file" style="display: none;">

                    <button id="btn" class="portrait">上传头像</button>
                    <button class="back">点我返回首页</button>
                </div>
                <!-- 内联框架 -->
                <!-- <iframe class="right loginarea" src="loginframe.html" frameborder="0"></iframe> -->
                <div class="slogan right">
                    <h1 class="title">
                        小A生活说
                        <span>1.0</span>
                    </h1>
                    <div class="download">
                        <button class="btn">下载小A生活说 App</button>
                        <div class="qrcode">
                            <img src="img/icon-qr-small.png" alt="">
                            <div class="qrcode-img1 ">
                                <img src="img/qrcode.png" alt="">
                                <p>
                                    iOS / Android 扫码直接下载
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content10">
            <h1 class="oo1">个人A动态</h1>
            <div class="deletebox">
                <input type="text" class="txt1" id="deleteid" autocomplete="off" placeholder="请输入要删除的动态id">
                <button class="fonti" id="deletebtn1">删除该动态</button>
            </div>

            <div class="sticky1">
                <div class="display2" id="display2"> 登录啦发表动态</div>
                <button id="submit6">我也要发布动态</button>
                <a href="#" class="backtop">回到顶部</a>
            </div>
            <div id="demo6">

            </div>
            <h1 class="oo2">一溜儿翻到底啦，去其他页面看看吧！~~~~~~</h1>
        </div>
        <div class="content8">

        </div>
        <div class="content">


            <h1 class="oo1">用户A动态</h1>
            <div class="searchdy">
                <input type="text" id="searchcontent" placeholder="搜索的关键字：动态的id，用户名，动态内容，标题，创建时间" autocomplete="off">
                <button id="submit00">查询相关动态</button>
                <!-- <button class="back8"> 返回所有用户动态</button> -->
            </div>
            <div class="sticky" id="ssb">
                <div class="display1" id="display1"> 发表动态请登录</div>
                <!-- <button id="submit2">点我上传数据</button><br> -->
                <button id="submit4">我也要发布动态</button>
                <button id="submit5">查找我的A动态</button>
                <a href="#" class="backtop">回到顶部</a>

            </div>


            <!-- 有多少人就有多少行，根据数组长度动态生成节点 -->
            <div id="demo">

            </div>
            <!-- 展示查询结果 -->
            <div id="demo9">

            </div>
            <h1 class="oo2">一溜儿翻到底啦，去其他页面看看吧！~~~~~~</h1>
            <!-- <script type="text/javascript" src="link.js"></script> -->
            <script type="text/javascript" src="ajax.js"></script>

        </div>
        <!-- <div id="photocontent">
            <h1 class="oo1">用户A相册界面</h1>
            <h2 style="width: 100%;margin:auto;">以后有时间一定实现相册功能</h2>
            <h2 style="width: 100%;margin:auto;color: brown;">点击相册可进行名称编辑及勾选</h2>
            <div class="info11"></div>
            <div id="head">
                <input type="button" value="新建一个相册" class="creat" />
                <input type="button" value="删除该相册" class="del" />
            </div>
            <div class="wrap11">

            </div>
        </div> -->
        <!-- 展示用户详情 -->
        <div id="content1">
            <h1 class="oo1">用户A动态详情</h1>
            <div class="sticky3" id="ssb2">
                <div class="display2" id="display2"> 登录啦发表动态</div>
                <button id="submitim">我也要发布动态</button>
                <button id="submiti">返回所有动态</button>
                <a href="#" class="backtop">回到顶部</a>
            </div>
            <div id="demo1">

            </div>
            <h1 class="oo2">一溜儿翻到底啦，去其他页面看看吧！~~~~~~</h1>
        </div>
        <div class="mcontent">
            <div class="bheader">发表我的小A生活动态</div>
            <div class="my_trend_banner">
                <!-- <span class="my_trends_alert">您还未发布任何动态</span> -->
                <div class="my_trends_inner">
                    <div class="push_my_trends">
                        <div class="my_title">
                            <p>标题区：</p>
                            <br>
                            <input type="text" class="my_title_input" id="cleantitle" placeholder="请输入标题">
                        </div>
                        <br>
                        <p>动态内容区：</p>
                        <div class="my_content" id="cleaner" contenteditable="true" placeholder="请输入相关内容：">

                        </div>
                        <button class="clean">清空输入内容</button>
                        <div class="my_pic">
                            <span class="new_built_pic " style="font-size: 10px;">--></span>
                            <form action="" enctype="multipart/form-data" method="POST">
                                <input type="file" name="" id="add_pic" multiple />
                            </form>
                            <div class="my_pic_box" id="cleanpic">
                                <p style="font-size: 30px;width: 100%;height: 20px;text-align: center;">图片预览区域</p>
                            </div>
                        </div>
                        <div class="trend_btn">
                            <button class="push_trends_sure" id="post1">发布</button>
                            <button class="pushtrends_delete">取消</button>
                        </div>
                    </div>
                    <div class="all_my_trends">

                    </div>
                </div>
            </div>
        </div>
        <div class="bigbox1">
            <div class="bheader">小A生活小窝</div>
            <div class="bbanner">
                <div class="lpage">
                    <div class="hintroduce">
                        <img class="hitroduceimg" src="3.jpg" alt="" style="float: left; margin-left: 10px; margin-right: 10px; width: 45px;height: 50px;">
                        <span id="hname">当前为游客，尚未登录请前往登陆注册</span>
                        <br><a class="ha">（添加签名档）</a><br>
                        <ul>
                            <li class="show"><a href="">我的主页</a></li>
                            <li class="show"><a href="">广播</a></li>
                            <li class="show"><a href="">相册</a></li>
                            <li class="show"><a href="">日记</a></li>
                            <li class="show"><a href="">豆列</a></li>
                            <li class="show"><a href="">片单</a>|<a href="">书单</a></li>
                            <li class="show"><a href="">设置</a></li>
                        </ul>
                    </div>
                    <div class="introduce">
                        <p class="l3"> <span id="name">（游客）</span> 这里是你的主页，用来展示你的生活和发现，也是别人认识你的地方。</p>
                        <p class="l3">完善你的个人资料，开始全新的豆瓣之旅吧。</p>
                        <p class="l2"><a href="#">1.上传头像 （√）</a></p>
                        <p class="l2"><a href="#">2.写一段自我介绍 （√）</a></p>
                        <p class="l1">以上选项也可以在页面右上角你的帐号中找到。</p>
                    </div>
                    <div class="daily">
                        <p class="ll">我的日记......<a>(全部)</a></p>
                        <p class="ll">我的相册......<a>(创建0~~关注0)</a></p>
                        <p class="ll">留言板...... <a>（全部）</a></p>
                        <textarea name="" id="mes1" style="width: 400px;height: 100px; outline: none; resize: none; " placeholder="请输入你要留言的内容："></textarea>
                        <button id="leftmes" style="width: 30px;height: 20px;  ">发布</button>
                        <ul class="list6">

                        </ul>

                    </div>
                </div>
                <div class="rpage">
                    <div class="card">
                        <div class="cardpic">
                            <img class="pici" src="3.jpg" alt="" style="width: 100%;height: 100%;">
                            <p id="namei">身份：游客<br>2021-04-23加入</p>
                        </div>
                        <div class="addi">
                            <a href="#" class="addii">
                                <添加自我介绍>
                            </a>
                        </div>
                        <div class="addiii">
                            <p class="pp0">我的广播 。。。。。。（全部）</p>
                            <div class='pp'><a href="#">>我被0人关注</a></div>
                        </div>
                        <img src="robot.png" alt="" style="margin-top:200px;width: 100%;height: 760px;">
                    </div>
                </div>
            </div>
            <div class="bfooter">
                <footer class="footer">
                    <div class="container clearfix">
                        <div class="left">
                            <p>© 2005－2021 littleA.com, all rights reserved 小A科技有限公司</p>
                            <p><a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="">0110418</a>号 </p>
                            <p>
                                京网文[2015]2026-368号 <img src="img/biaoshi.gif" alt=""> <a href="">京公网安备11010502000728</a> 新出网证(京)字129号
                            </p>
                            <p>
                                违法和不良信息举报电话：4008353331-9
                            </p>
                            <p>
                                <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a>
                            </p>
                        </div>
                        <div class="right">
                            <nav class="menu">
                                <a href="">关于小A</a> ·
                                <a href="">在小A工作</a> ·
                                <a href="">联系我们</a> ·
                                <a href="">法律声明</a> ·
                                <a href="">帮助中心</a> ·
                                <a href="">移动应用</a> ·
                                <a href="">小A广告</a>
                            </nav>
                            <div class="adv">
                                <a href="">
                                    <img src="img/adv3.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
        <div class="smallbox">
            <!-- 主区域样式 -->
            <div>
                <!-- 热点 -->
                <div class="section">
                    <div class="container clearfix">
                        <div class="aside-right">
                            <div class="adv">
                                <a href="">
                                    <img src="./img/7.jpg" alt="">
                                </a>
                            </div>
                            <div class="section-title">
                                <h2 class="title">热门话题</h2>
                                <span class="link">
                            <a href="">
                                去话题广场
                            </a>
                        </span>

                            </div>
                            <ul class="hot-list">
                                <li>
                                    <div class="title">
                                        <a href="" class="adv-tag">文学作品中最深刻的孤独描写
                                </a>
                                    </div>
                                    <div class="desc">
                                        <span>13.9万人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>5.6万人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>8.0万人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>3.4万人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>2.9万人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="title">
                                        <a href="">文学作品中最深刻的孤独描写</a>
                                    </div>
                                    <div class="desc">
                                        <span>2.4万人浏览</span>
                                        <span>新话题</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热点内容</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>

                            </div>
                            <div class="hot-main clearfix">
                                <div class="left">
                                    <ul class=" item-list">
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/9.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            Loremasdas asdfa sdfasdfasdfasdfasdfasdfa
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/9.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/9.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="img">
                                                <a href="">
                                                    <img src="img/9.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="words">
                                                <a href="">
                                            我们仍未知道那天所看见的论文的意义
                                        </a>
                                                <span>
                                            76张照片
                                        </span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="right">
                                    <ul>
                                        <li>
                                            <a href="">城市失忆症</a>
                                            <div class="title">
                                                泼萝的日记
                                            </div>
                                            <div class="desc">
                                                1. “我回到我的城市，熟悉如眼泪，如静脉，如童年的腮腺炎。” 1930年冬天的曼德...
                                            </div>
                                        </li>
                                        <li><a href="">Lorem ipsum dolor sit.</a></li>
                                        <li><a href="">Culpa praesentium hic laboriosam?</a></li>
                                        <li><a href="">Aliquid iusto excepturi fugit.</a></li>
                                        <li><a href="">Eveniet impedit veritatis vitae.</a></li>
                                        <li><a href="">Esse pariatur ipsum dicta?</a></li>
                                        <li><a href="">Soluta et autem magnam.</a></li>
                                        <li><a href="">Officia qui culpa excepturi.</a></li>
                                        <li><a href="">Officiis nihil corporis accusamus?</a></li>
                                        <li><a href="">Officia nobis sequi error.</a></li>
                                        <li><a href="">Cupiditate eius consequatur harum!</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 豆瓣时间 -->
                <div class="section">
                    <div class="container clearfix">
                        <div class="aside-left">
                            <h2 class="title">
                                <a href="" class="dark-color">豆瓣时间</a>
                            </h2>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热门专栏</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <div class="time-main">
                                <ul class="item-list">
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/8.jpg" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">
                                        好莱坞人像布光课——美恐摄影大师教你立刻出师
                                    </a>
                                            <span>
                                        视频专栏
                                    </span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 视频 -->
                <div class="section">
                    <div class="container clearfix">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="" class="dark-color">视频</a>
                                </h2>
                            </div>
                        </div>
                        <div class="main video-main">
                            <div class="section-title">
                                <a href="">
                                    <h2 class="title">
                                        瓣嘴
                                    </h2>
                                </a>
                            </div>

                            <ul class="item-list">
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                            </ul>

                            <div class="section-title">
                                <a href="">
                                    <h2 class="title">观影会客厅</h2>
                                </a>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">

                                            <img src="img/cover3.jpg" alt="">

                                        </div>
                                    </a>
                                    <div class="words">
                                        <a href="">马伊琍衣品遭围攻吐槽，清奇脑回路解读流行语</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 电影 -->
                <div class="section">
                    <div class="container clearfix movie-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">电影</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">影讯&购票</a></li>
                                    <li><a href="" class="new">选电影</a></li>
                                    <li><a href="">Eum.</a></li>
                                    <li><a href="">Voluptatibus?</a></li>
                                    <li><a href="" class="new">Commodi.</a></li>
                                    <li><a href="">Facere!</a></li>
                                    <li><a href="">Est!</a></li>
                                    <li><a href="">Suscipit.</a></li>
                                    <li><a href="">A.</a></li>
                                    <li><a href="">Libero.</a></li>
                                    <li><a href="">Dolore.</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">影片分类</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="right-menu-list clearfix">
                                <li><a href="">爱情</a></li>
                                <li><a href="">喜剧</a></li>
                                <li><a href="">剧情</a></li>
                                <li><a href="">Lorem.</a></li>
                                <li><a href="">Cumque.</a></li>
                                <li><a href="">Velit.</a></li>
                                <li><a href="">Perspiciatis?</a></li>
                                <li><a href="">Eos.</a></li>
                                <li><a href="">Quidem.</a></li>
                                <li><a href="">Assumenda.</a></li>
                                <li><a href="">Soluta.</a></li>
                                <li><a href="">Voluptate?</a></li>
                                <li><a href="">Alias.</a></li>
                            </ul>

                            <div class="section-title">
                                <h2 class="title">近期热门</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="order-movie-list">
                                <li>
                                    <a href="">风中有朵雨做的云</a>
                                </li>
                                <li>
                                    <a href="">飞驰人生</a>
                                </li>
                                <li><a href="">Lorem, ipsum dolor.</a></li>
                                <li><a href="">Saepe, repellat pariatur!</a></li>
                                <li><a href="">Voluptate, perferendis enim.</a></li>
                                <li><a href="">Rem, qui officiis!</a></li>
                                <li><a href="">Sit, numquam mollitia.</a></li>
                                <li><a href="">Quisquam, aperiam id.</a></li>
                                <li><a href="">Laboriosam, consectetur cupiditate.</a></li>
                                <li><a href="">Maiores, fugiat vel!</a></li>
                            </ul>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">正在热映</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <div>
                                <ul class="item-list">
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img">
                                            <a href="">
                                                <img src="img/cover5.webp" alt="">
                                            </a>
                                        </div>
                                        <div class="words">
                                            <a href="">阿拉丁阿拉丁阿拉丁阿拉丁</a>
                                        </div>
                                        <div class="star">
                                            <span class="star-bg star50"></span>
                                            <span class="number">
                                        8.9
                                    </span>
                                        </div>
                                        <div class="func">
                                            <a href="" class="block-link">选座购票</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 小组 -->
                <div class="section">
                    <div class="container group-area clearfix">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">小组</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">精选</a></li>
                                    <li><a href="" class="new">文化</a></li>
                                    <li><a href="">行摄</a></li>
                                    <li><a href="">Voluptatibus?</a></li>
                                    <li><a href="" class="new">Commodi.</a></li>
                                    <li><a href="">Facere!</a></li>
                                    <li><a href="">Est!</a></li>
                                    <li><a href="">Suscipit.</a></li>
                                    <li><a href="">A.</a></li>
                                    <li><a href="">Libero.</a></li>
                                    <li><a href="">Dolore.</a></li>
                                </ul>
                            </nav>
                        </div>

                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">小组分类</h2>
                            </div>

                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">兴趣</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">旅行</a></li>
                                    <li><a href="">摄影</a></li>
                                    <li><a href="">影视</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热门小组</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover6.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                        <span>
                                    16265 个成员
                                </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 图书 -->
                <div class="section">
                    <div class="container clearfix book-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">读书</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">分类浏览</a></li>
                                    <li><a href="" class="new">阅读</a></li>
                                    <li><a href="">作者</a></li>
                                    <li><a href="">书评</a></li>
                                </ul>
                            </nav>

                            <div class="menu-adv">
                                <a href="">
                                    <span class="app-icon-1"></span>
                                </a>
                                <a href="">
                            豆瓣阅读
                        </a>
                            </div>
                        </div>

                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">热门标签</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <ul class="right-menu-list clearfix">
                                    <li><span>[文学]</span></li>
                                    <li><a href="">小说</a></li>
                                    <li><a href="">随笔</a></li>
                                    <li><a href="">日本文学</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">新书速递</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                            </ul>

                            <div class="section-title">
                                <h2 class="title">原创数字作品</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href="">
                                            <img src="img/cover7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="words">
                                        <a href="">
                                    镀金时代
                                </a>
                                        <span>
                                    夏清影
                                </span>
                                    </div>
                                    <div class="func">
                                        <a href="" class="block-link">免费试读</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 音乐 -->
                <div class="section">
                    <div class="container clearfix music-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">音乐</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">音乐人</a></li>
                                    <li><a href="" class="new">专题</a></li>
                                    <li><a href="">排行榜</a></li>
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Similique.</a></li>
                                    <li><a href="">Repellendus.</a></li>
                                    <li><a href="">Excepturi!</a></li>
                                    <li><a href="">Illum?</a></li>
                                    <li><a href="">In.</a></li>
                                    <li><a href="">Eaque.</a></li>
                                    <li><a href="">Dicta.</a></li>
                                    <li><a href="">Cum.</a></li>
                                    <li><a href="">Cumque?</a></li>
                                </ul>
                            </nav>

                            <div class="menu-adv">
                                <a href="">
                                    <span class="app-icon-2"></span>
                                </a>
                                <a href="">
                            豆瓣FM
                        </a>
                            </div>
                            <div class="menu-adv">
                                <a href="">
                                    <span class="app-icon-3"></span>
                                </a>
                                <a href="">
                            豆瓣音乐人
                        </a>
                            </div>
                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">本周流行音乐人</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="music-player-list">
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <span class="number left">1.</span>
                                    <div class="player right">
                                        <a href="">
                                            <div class="img left iconbofang1 iconfont">
                                                <img src="img/cover8.jpg" alt="">
                                            </div>
                                        </a>
                                        <div class="words left">
                                            <a href="">王敖（音乐人）</a>
                                            <span>流派: 世界音乐 World </span>
                                            <span>463人关注</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">豆瓣新碟榜</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover9.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        1. <a href="">我好嗎？－太陽如常升起 (預購版)</a>
                                    </div>
                                    <div class="words">
                                        <a href="">梁静茹</a>
                                    </div>
                                    <div class="star">
                                        <span class="star-bg star50"></span>
                                        <span class="number">
                                    8.9
                                </span>
                                    </div>
                                </li>
                            </ul>
                            <div class="section-title">
                                <h2 class="title">热门歌单</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list hot-music">
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="img iconfont iconbofang">
                                            <img src="img/cover10.jpg" alt="">
                                        </div>
                                    </a>
                                    <div class="words">
                                        LM-6.2014
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 豆品 -->
                <div class="section">
                    <div class="container clearfix doupin-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">豆品</a>
                                </h2>
                            </div>
                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">热门活动</h2>
                            </div>
                            <div class="adv">
                                <a href="">
                                    <img src="./img/adv2.jpg" alt="">
                                </a>
                            </div>
                            <div>
                                <a href="">我的豆瓣收藏夹里有什么</a>
                            </div>
                            <div class="section-title">
                                <h2 class="title">官方小组</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">热卖商品</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>
                            <ul class="item-list">
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <a href=""><img src="img/cover11.jpg" alt=""></a>
                                    </div>
                                    <div class="words clearfix">
                                        <a href="" class="left">豆瓣冻顶乌龙茶</a>
                                        <span class="right">￥59.00</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 同城 -->
                <div class="section">
                    <div class="container clearfix city-area">
                        <div class="aside-left">
                            <div class="title">
                                <h2>
                                    <a href="">同城</a>
                                </h2>
                            </div>

                            <nav class="left-menu">
                                <ul>
                                    <li><a href="">近期活动</a></li>
                                    <li><a href="" class="new">主办方</a></li>
                                    <li><a href="">舞台剧</a></li>
                                </ul>
                            </nav>

                        </div>
                        <div class="aside-right">
                            <div class="section-title">
                                <h2 class="title">活动标签</h2>
                            </div>

                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                            <div class="group">
                                <div class="group-name">
                                    <a href="">音乐</a>
                                </div>
                                <ul class="right-menu-list clearfix">
                                    <li><a href="">Lorem.</a></li>
                                    <li><a href="">Cumque.</a></li>
                                    <li><a href="">Velit.</a></li>
                                    <li><a href="">Perspiciatis?</a></li>
                                    <li><a href="">Eos.</a></li>
                                    <li><a href="">Quidem.</a></li>
                                    <li><a href="">Assumenda.</a></li>
                                    <li><a href="">Soluta.</a></li>
                                    <li><a href="">Voluptate?</a></li>
                                    <li><a href="">Alias.</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="main">
                            <div class="section-title">
                                <h2 class="title">成都 · 本周热门活动</h2>
                                <span class="link">
                            <a href="">
                                更多
                            </a>
                        </span>
                            </div>

                            <ul class="item-list">
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="img left">
                                        <a href=""><img src="img/cover12.jpg" alt=""></a>
                                    </div>
                                    <div class="words">
                                        <a href="">苏菲珊曼妮成都演唱会</a>
                                        <span>5月31日 周五 19:30 - 21:30</span>
                                        <span>特仑苏音乐厅 成都市锦江区...</span>
                                        <span>80人关注</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <footer class="footer">
                <div class="container clearfix">
                    <div class="left">
                        <p>© 2005－2021 littleA.com, all rights reserved 小A科技有限公司</p>
                        <p><a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="">0110418</a>号 </p>
                        <p>
                            京网文[2015]2026-368号 <img src="img/biaoshi.gif" alt=""> <a href="">京公网安备11010502000728</a> 新出网证(京)字129号
                        </p>
                        <p>
                            违法和不良信息举报电话：4008353331-9
                        </p>
                        <p>
                            <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a>
                        </p>
                    </div>
                    <div class="right">
                        <nav class="menu">
                            <a href="">关于小A</a> ·
                            <a href="">在小A工作</a> ·
                            <a href="">联系我们</a> ·
                            <a href="">法律声明</a> ·
                            <a href="">帮助中心</a> ·
                            <a href="">移动应用</a> ·
                            <a href="">小A广告</a>
                        </nav>
                        <div class="adv">
                            <a href="">
                                <img src="img/adv3.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <!-- 页面切换 -->
    <script>
        // var photo1 = document.getElementById('photo1');
        // var photocontent = document.getElementById('photocontent');
        var demo1 = document.getElementById('demo1');
        var demo = document.getElementById('demo');
        var demo9 = document.getElementById('demo9');
        var clean = document.querySelector('.clean');
        var searchdy = document.querySelector('.searchdy');
        var sticky = document.querySelector('.sticky');
        var bigbox1 = document.querySelector('.bigbox1');
        var bigbox = document.querySelector('.bigbox');
        var login = document.querySelector('.logging');
        var mask = document.querySelector('.wrapper');
        var page1 = document.querySelector('#page');
        var link = document.querySelector('.loginbtn');
        var back = document.querySelector('.back');
        var content = document.querySelector('.content');
        var content1 = document.querySelector('#content1');
        var content10 = document.querySelector('.content10');
        var smallbox = document.querySelector('.smallbox');
        var closebtn = document.querySelector('.closebtn1');
        var closebtn1 = document.querySelector('#closebtn2');
        var loginarea1 = document.querySelector('.loginarea1');
        var loginarea2 = document.querySelector('.loginarea2');
        var link2 = document.querySelector('.changepw');
        var submit4 = document.querySelector('#submit4');
        var submit5 = document.querySelector('#submit5');
        var submitim = document.querySelector('#submitim');
        var submiti = document.querySelector('#submiti');
        var submit6 = document.querySelector('#submit6');
        var submit88 = document.querySelector('#submit88');
        var mcontent = document.querySelector('.mcontent');
        var back1 = document.querySelector('.back1');
        var back3 = document.querySelector('.back3');
        clean.addEventListener('click', function() {
            document.getElementById("cleaner").innerHTML = "";
        })
        submit4.addEventListener('click', function() {
            bigbox1.style.display = 'none';
            smallbox.style.display = 'none';
            content.style.display = 'none';
            mcontent.style.display = 'block';
            content1.style.display = 'none';
            demo1.style.display = 'block';

        })
        submit6.addEventListener('click', function() {
            bigbox1.style.display = 'none';
            smallbox.style.display = 'none';
            content.style.display = 'none';
            mcontent.style.display = 'block';
            sticky.style.display = 'block';
            content10.style.display = 'none';
            demo1.style.display = 'block';

        })
        submitim.addEventListener('click', function() {

            content1.style.display = 'none';
            mcontent.style.display = 'block';
            sticky.style.display = 'none';

        })
        submit88.addEventListener('click', function() {
            bigbox1.style.display = 'none';
            smallbox.style.display = 'none';
            content.style.display = 'block';
            content1.style.display = 'none';
            mcontent.style.display = 'none';
            sticky.style.display = 'block';
            content10.style.display = 'none';
            searchdy.style.display = 'block';
            demo.style.display = 'none';
            demo1.style.display = 'none';
            demo9.style.display = 'block';
            // photocontent.style.display = 'none';


        })
        submit5.addEventListener('click', function() {
            bigbox1.style.display = 'none';
            smallbox.style.display = 'none';
            content.style.display = 'none';
            mcontent.style.display = 'none';
            content10.style.display = 'block';
            content1.style.display = 'none';



        })
        page1.addEventListener('click', function() {
                bigbox1.style.display = 'block';
                smallbox.style.display = 'none';
                content.style.display = 'none';
                mcontent.style.display = 'none';
                content10.style.display = 'none';
                content1.style.display = 'none';
                // photocontent.style.display = 'none';

            })
            // photo1.addEventListener('click', function() {
            //     bigbox1.style.display = 'none';
            //     smallbox.style.display = 'none';
            //     content.style.display = 'none';
            //     mcontent.style.display = 'none';
            //     content10.style.display = 'none';
            //     content1.style.display = 'none';
            // })
        back3.addEventListener('click', function() {
            bigbox1.style.display = 'none';
            smallbox.style.display = 'block';
            content.style.display = 'none';
            mcontent.style.display = 'none';
            content10.style.display = 'none';
            content1.style.display = 'none';

        })
        submiti.addEventListener('click', function() {
            bigbox1.style.display = 'none';
            smallbox.style.display = 'none';
            content.style.display = 'block';
            mcontent.style.display = 'none';
            content10.style.display = 'none';
            content1.style.display = 'none';
            demo.style.display = 'block';

        })
        link.addEventListener('click', function() {
            login.style.display = 'block';
            mask.style.display = 'block';

        })
        closebtn.addEventListener('click', function() {
            login.style.display = 'none';
            mask.style.display = 'none';

        })
        closebtn1.addEventListener('click', function() {
            login.style.display = 'none';
            mask.style.display = 'none';

        })
        back.addEventListener('click', function() {
            content.style.display = 'none';
            smallbox.style.display = 'block';
            bigbox1.style.display = 'none';
            mcontent.style.display = 'none';
            content10.style.display = 'none';
            content1.style.display = 'none';
            // photocontent.style.display = 'none';


        })
        link2.addEventListener('click', function() {
            loginarea1.style.display = 'none';
            loginarea2.style.display = 'block';
        })
        back1.addEventListener('click', function() {
            loginarea2.style.display = 'none';
            loginarea1.style.display = 'block';
        })
    </script>
    <!-- 七天免登录 -->
    <script>
        //设置cookie
        function setCookie(_name, val, expires) {
            var d = new Date();
            d.setDate(d.getDate() + expires);
            document.cookie = _name + "=" + val + ";path=/;expires=" + d.toGMTString();
        }

        //获取cookie
        function getCookie(_name) {
            var cookie = document.cookie;
            var arr = cookie.split("; ");
            for (var i = 0; i < arr.length; i++) {
                var newArr = arr[i].split("=");
                if (newArr[0] == _name) {
                    return newArr[1];
                }
            }
        }
        /*
           如何将json对象转换为字符串
               JSON.stringify(对象);
               返回值是一个字符串
           如何将字符串转换为json对象
               JSON.parse(字符串)
               返回值是对象
        */
        var oBtn = document.getElementById("submit");
        var oUser = document.getElementById("username");
        var oPass = document.getElementById("password");
        var oCheck = document.getElementById("check1");

        if (getCookie("init")) {
            var cookie = JSON.parse(getCookie("init"));
            oUser.value = cookie.name;
            oPass.value = cookie.pass;
            oCheck.checked = true;
        }

        oBtn.onclick = function() {
            if (oCheck.checked) {
                var obj = {};
                obj.name = oUser.value;
                obj.pass = oPass.value;
                var str = JSON.stringify(obj);
                setCookie("init", str, 7);
            }
        }
    </script>
    <script>
        //获取元素
        //注册事件
        //创建元素
        //注册事件
        var o_txt = document.querySelector('#mes1');
        var o_btn = document.querySelector('#leftmes');
        var o_ul = document.querySelector('.list6');
        o_btn.onclick = function() {
            var txt = o_txt.value;
            //创建li
            var o_li = document.createElement('li');
            o_li.className = 'o_li';
            //创建删除
            var a = document.createElement('a');
            a.className = 'deletea'
                //设置啊a的href属性
            a.href = 'javascript:;'
            a.innerText = '删除该条';
            //把留言放到li里
            o_li.innerText = txt + '\n' + new Date();
            //把a放到留言后边
            o_li.appendChild(a);
            //如果ul里面没有li则追加到ul里面有的话插入到最前面
            if (o_ul.children.length) {
                o_ul.insertBefore(o_li, o_ul.firstElementChild);
            } else {
                o_ul.appendChild(o_li);
            }
            a.onclick = function() {
                    //a的父元素为li  移除li
                    a.parentNode.remove();
                }
                //清空里面的value
            o_txt.value = '';
        }
    </script>
    <!-- 相册试试 -->

    <!-- //     window.onload = function() {
    //         var creat = document.querySelector('.creat');
    //         var del = document.querySelector('.del');
    //         var wrap = document.querySelector('.wrap11');
    //         var info11 = document.querySelector('.info11');
    //         var timer = 0;
    //         creat.onclick = function() {
    //             /* 创建元素，并添加事件 */
    //             var file = document.createElement('div');
    //             var fileName = getFileName();
    //             file.className = "file22";
    //             file.innerHTML = '<input type="checkbox" name=""><span class="fileName" contenteditable>' + fileName + '</span>';
    //             var check = file.querySelector('input[type = "checkbox"]');
    //             var fileName = file.querySelector('.fileName');
    //             file.onmouseover = function() {
    //                 this.className = "file22 fileShow";
    //             };
    //             file.onmouseout = function() {
    //                 if (!check.checked) {
    //                     this.className = "file22";
    //                 }
    //             };
    //             fileName.onblur = function() {
    //                 if (this.innerHTML.trim() == "") {
    //                     info11.innerHTML = "请输入文件夹名字";
    //                     info11.style.transform = "translateY(0)";
    //                     this.focus();
    //                     clearTimeout(timer);
    //                     timer = setTimeout(function() {
    //                         info11.style.transform = "translateY(-50px)";
    //                     }, 2000);
    //                     return;
    //                 }
    //                 var fileNames = document.querySelectorAll('.fileName');
    //                 for (var i = 0; i < fileNames.length; i++) {
    //                     if (this != fileNames[i] && this.innerHTML == fileNames[i].innerHTML) {
    //                         info11.innerHTML = "文件夹名字重名了，请重新输入";
    //                         info11.style.transform = "translateY(0)";
    //                         this.focus();
    //                         clearTimeout(timer);
    //                         timer = setTimeout(function() {
    //                             info.style.transform = "translateY(-50px)";
    //                         }, 2000);
    //                     }
    //                 }
    //             };
    //             /*onkeydown 键盘按下 */
    //             fileName.onkeydown = function() {
    //                 if (this.innerHTML == "请输入名字") {
    //                     this.innerHTML = "";
    //                 }
    //             }
    //             wrap.appendChild(file);
    //         };
    //         del.onclick = function() {
    //             /* 删除选中的元素 */
    //             var fileName = wrap.querySelectorAll('input:checked+.fileName');
    //             var input = wrap.getElementsByTagName("input")
    //                 /* query方法只获取一次，dom修改了如果不重新获取，它是不会和dom同步的而get方法会时时和dom同步，dom改了get获取到的数据也会自定修改 */
    //                 //console.log(fileName,input);
    //             for (var i = 0; i < fileName.length; i++) {
    //                 wrap.removeChild(fileName[i].parentNode);
    //             }
    //             console.log(fileName);
    //         };
    //         // 获取文件夹名字
    //         /* 
    //         创建文件夹名字并进行排序
    //         0 新建文件夹
    //         1 新建文件夹2
    //         2 新建文件夹3
             
    //         第一种情况：正常排序
    //         */
    //         function getFileName() {
    //             var fileName = "新建文件夹";
    //             var fileNameLast = "";
    //             var fileNames = wrap.querySelectorAll('.fileName');
    //             if (fileNames.length == 0) { //当前一个都还没有也就是创建第0个
    //                 return fileName;
    //             }
    //             // 当中间可能删除了几个
    //             /*
    //             由于中间会删除再添加，所以顺序会被打乱
    //             把所有的名字存入数组，然后进行排序
    //             */
    //             var names = [];
    //             for (var i = 0; i < fileNames.length; i++) {
    //                 names.push(fileNames[i].innerHTML);
    //             }

    //             names = names.filter(function(val) {
    //                 var startName = val.substr(0, 5);
    //                 if (startName != "新建文件夹") {
    //                     return false; /*筛选掉不是已新建文件夹命名的*/
    //                 }
    //                 var lastName = val.substr(5);
    //                 if (isNaN(lastName)) { /*筛选掉不是已新建文件夹跟随的不是数字的*/
    //                     return false;
    //                 }
    //                 return true;
    //             });
    //             names.sort(function(a, b) {
    //                 return a.substr(5) - b.substr(5);
    //             });
    //             console.log(names);
    //             for (var i = 0; i < names.length; i++) {
    //                 if (names[0] != fileName) {
    //                     return fileName;
    //                 }
    //                 if (i > 0 && names[i] != fileName + (i + 1)) {
    //                     return fileName + (i + 1);
    //                 }
    //             }
    //             //当前顺序向后排列 name 就等于在当前的个数上+1
    //             fileNameLast = names.length + 1;
    //             fileName += fileNameLast;
    //             return fileName;
    //         }
    //     };
    -->
</body>

</html>